<template>
    <el-card class="environmental">
        <div class="title-container">
            <span class="rect"></span>
            <h3>环保安监</h3>
        </div>
        <el-divider></el-divider>
        <div class="content">
            <div class="item">环保信用等级<div class="right" v-if="info.length !== 0">{{ computedIndexNum("环保信用等级") }}</div>
                <div v-else>--</div>
            </div>
            <div class="item">是否重点排污监控企业<div class="right" v-if="info.length !== 0">{{ computedIndexNum("是否重点排污监控企业") ==
                true
                ? "是" : "否" }}</div>
                <div v-else>--</div>
            </div>
            <div class="item">安全生产标准化等级<div class="right" v-if="info.length !== 0">{{ computedIndexNum("安全生产标准化等级") }}</div>
                <div v-else>--</div>
            </div>
            <!-- <div class="item">违法事故记录<div class="right">{{ computedIndexNum("违法事故记录") }}<span class="unit">次</span></div> -->
            <div class="item">违法事故记录<div class="right" v-if="info.length !== 0">{{ info.find(i => i.SubtypeName ===
                "违法事故记录")
                ? info.find(i =>
                    i.SubtypeName === "违法事故记录").IndexNum || 0 : 0 }}<span class="unit">次</span></div>
                <div v-else>--</div>
            </div>
        </div>

    </el-card>
</template>


<script>
const wjApi = window.$api.enterpriseManagement.wjscms
export default {
    data() {
        return {
            info: []
        }
    },
    props: {
        unifiedSocialCreditCode: {
            type: String,
            default: ""
        }
    },
    methods: {
        computedIndexNum(name) {
            return this.info.find(i => i.SubtypeName === name)?.IndexNum || "--"
        },
        async init() {
            this.info = [];
            if (this.unifiedSocialCreditCode) {
                let res = await wjApi.info(
                    `http://221.224.136.227/wjscms/cf/service/DBService/CXQYXQZLXX`,
                    {
                        UID: this.unifiedSocialCreditCode,
                        f: "list"
                    }
                )
                this.info = res.Data
            }
        }
    },
    mounted() {
        // this.init()
    }
}
</script>


<style scoped lang='scss'>
.content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 10px;

    .item {
        font-size: 12px;
        display: flex;
        align-items: center;
        height: 40px;
        justify-content: space-between;
        padding: 0 2px 0 10px;
        background: #f9f9f9;

        .right {
            margin-right: 20px;
            font-weight: bold;
            font-size: 16px;

            .unit {
                font-size: 14px;
                color: rgb(157, 157, 157);
                margin-left: 4px;
            }
        }
    }
}

.environmental {
    width: 60.5%;
}
</style>